<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Login</title>
  <link rel="stylesheet" type="text/css" th:href="@{/static/css/dining.css}" />
</head>
<body>

<!-- 引入公共头部 -->
<header th:replace="common/top"></header>

<div id="BackLink">
  <a th:href="@{/catalog/index}">Return to Main Menu</a>
</div>

<div id="Catalog">

  <form th:action="@{/account/signOn}" method="post">

    <p th:if="${signOnMsg != null}" style="color:red;" th:text="${signOnMsg}"></p>

    <table class="signOnTable">
      <tr>
        <td>
          <div>
            <input type="text" name="username" placeholder="Username:"
                   th:value="${username != null ? username : ''}" />
            <img src="/images/username.png" class="icon">
          </div>
        </td>
      </tr>

      <tr>
        <td>
          <div>
            <input type="password" name="password" placeholder="Password:"
                   th:value="${password != null ? password : ''}" />
            <img src="/images/code.png" class="icon">
          </div>
        </td>
      </tr>

      <!-- ✅ 改进验证码部分 -->
      <tr>
        <td>
          <div>
            <input type="text" name="verificationCode" placeholder="Verification:" />
            <img src="/images/ver.png" class="icon">
            <!-- ✅ 点击验证码图片可刷新 -->
            <img th:src="@{/account/captcha}" class="ver" id="captchaImg" onclick="refreshCaptcha()">
          </div>
        </td>
      </tr>
    </table>

    <input type="submit" name="signon" value="&nbsp;&nbsp;&nbsp;login&nbsp;&nbsp;&nbsp;" />

  </form>

  <p>Need a user name and password? <a th:href="@{/account/register}">Register Now!</a></p>

</div>

<!-- 引入 bottom.html -->
<footer th:replace="common/bottom"></footer>

<!-- ✅ JavaScript 代码：刷新验证码 -->
<script>
  function refreshCaptcha() {
    document.getElementById("captchaImg").src = "/account/captcha?" + new Date().getTime();
  }
</script>

</body>
</html>